<template>
  <div id="IndexWS">
    <div class="head-icon"></div>
    <div class="min-w1190 sarch-logo-box">
      <!-- 受托支付 -->
      <div class="jrBanner" @click="closeArea()">
        <div class="topText"><span class="text">自己遇到</span></div>
        <ul class="one">
          <li>
            <router-link to="/new/ymzs01">
              <div class="new"><p>最新加入</p></div>
              <h1 style="text-align: left;">filters 过滤器</h1>
              <div class="t1">
                <div class="one"><div>* * *</div><div>难度指数</div></div>
                <div class="one"><div>211108</div><div>创建时间</div></div>
                <div class="one month78"><div class="month78">211110</div><div>完成时间</div></div>
                <div class="four"><div>程序员</div><div>查看主体</div></div>
              </div>
              <div class="t2">
                <div class="text"><span>纯信用</span></div>
                <div class="text"><span>0手续费</span></div>
                <div class="text"><span>随借随还</span></div>
              </div>
              <div class="btn3">
                <span>立即查看</span>
              </div>
            </router-link>
          </li>
          <li>
            <router-link to="">
              <!-- <div class="new"><p>火爆推荐</p></div> -->
              <h1 style="text-align: left;">验证多个element表单</h1>
              <div class="t1">
                <div class="one"><div>* * * *</div><div>难度指数</div></div>
                <div class="one"><div>211110</div><div>创建时间</div></div>
                <div class="one month78"><div class="month78">211115</div><div>完成时间</div></div>
                <div class="four"><div>程序员</div><div>查看主体</div></div>
              </div>
              <div class="t2">
                <div class="text"><span>纯信用</span></div>
                <div class="text"><span>0手续费</span></div>
                <div class="text"><span>随借随还</span></div>
              </div>
              <div class="btn3">
                <span>敬请期待</span>
              </div>
            </router-link>
          </li>
          <li>
            <router-link to="">
              <div class="new"><p>火爆推荐</p></div>
              <h1 style="text-align: left;">同时调用多个接口</h1>
              <div class="t1">
                <div class="one"><div>*****</div><div>难度指数</div></div>
                <div class="one"><div>211118</div><div>创建时间</div></div>
                <div class="one month78"><div class="month78">211120</div><div>完成时间</div></div>
                <div class="four"><div>程序员</div><div>查看主体</div></div>
              </div>
              <div class="t2">
                <div class="text"><span>纯信用</span></div>
                <div class="text"><span>0手续费</span></div>
                <div class="text"><span>随借随还</span></div>
              </div>
              <div class="btn3">
                <span>敬请期待</span>
              </div>
            </router-link>
          </li>
        </ul>
        <ul class="one">
          <li>
            <router-link to="">
              <!-- <div class="new"><p>最新加入</p></div> -->
              <h1 style="text-align: left;">数组相关</h1>
              <div class="t1">
                <div class="one"><div>* * *</div><div>难度指数</div></div>
                <div class="one"><div>211128</div><div>创建时间</div></div>
                <div class="one month78"><div class="month78">211130</div><div>完成时间</div></div>
                <div class="four"><div>程序员</div><div>查看主体</div></div>
              </div>
              <div class="t2">
                <div class="text"><span>纯信用</span></div>
                <div class="text"><span>0手续费</span></div>
                <div class="text"><span>随借随还</span></div>
              </div>
              <div class="btn3">
                <span>敬请期待</span>
              </div>
            </router-link>
          </li>
          <li>
            <router-link to="">
              <div class="new"><p>火爆推荐</p></div>
              <h1 style="text-align: left;">读取xlsx表格数据</h1>
              <div class="t1">
                <div class="one"><div>*****</div><div>难度指数</div></div>
                <div class="one"><div>211218</div><div>创建时间</div></div>
                <div class="one month78"><div class="month78">211230</div><div>完成时间</div></div>
                <div class="four"><div>程序员</div><div>查看主体</div></div>
              </div>
              <div class="t2">
                <div class="text"><span>纯信用</span></div>
                <div class="text"><span>0手续费</span></div>
                <div class="text"><span>随借随还</span></div>
              </div>
              <div class="btn3">
                <span>敬请期待</span>
              </div>
            </router-link>
          </li>
          <li>
            <router-link to="">
              <!-- <div class="new"><p>火爆推荐</p></div> -->
              <h1 style="text-align: left;">对象相关</h1>
              <div class="t1">
                <div class="one"><div>* * *</div><div>难度指数</div></div>
                <div class="one"><div>211208</div><div>创建时间</div></div>
                <div class="one month78"><div class="month78">211210</div><div>完成时间</div></div>
                <div class="four"><div>程序员</div><div>查看主体</div></div>
              </div>
              <div class="t2">
                <div class="text"><span>纯信用</span></div>
                <div class="text"><span>0手续费</span></div>
                <div class="text"><span>随借随还</span></div>
              </div>
              <div class="btn3">
                <span>敬请期待</span>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
      <!-- 自主支付 -->
      <div class="payment" @click="closeArea()">
        <div class="content">
          <div class="twoText"><span class="text">前端资源</span></div>
          <div class="screen">
            <!-- 所在地区 -->
            <div class="mySelect" style="width: 296px;">
              <div class="select" @click.stop="selectList(1)">
                <span :class="{ tsxts: form.applicableAreaCity !== '所在地区' }">{{form.applicableAreaCity}}</span>
                <i :class="[isRegion ? 'redOne' : 'corner']"></i>
              </div>
              <div class="region" v-show="isRegion">
                <i class="whiteRegion"></i>
                <div class="btm">
                  <div class="province">
                    <div class="list" :id='"list"+index' @click.stop="selectProvince(item,index)" v-for="(item,index) in regionList" :key="index">{{item.name}}</div>
                  </div>
                  <div class="city" v-show="isCity">
                    <div class="list" :id='"city"+index' @click.stop="selectCity(item,index)" v-for="(item,index) in children" :key="index">{{item.name}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="lines"><div class="aaa"></div></div>
            <!-- 浏览次数 -->
            <div class="mySelect" style="width: 297px;">
              <div class="select" @click.stop="selectList(2)">
                <span :class="{ tsxts: loan !== '浏览次数' }">{{loan}}</span>
                <i :class="[isLoan ? 'redOne' : 'corner']"></i>
              </div>
              <div class="option" v-show="isLoan">
                <i class="whiteOption"></i>
                <div class="btm">
                  <div class="province">
                    <div class="list" :id='"loan"+index' @click.stop="changeAmount(item,index)" v-for="(item,index) in amountList" :key="index">{{item}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="lines"><div class="aaa"></div></div>
            <!-- 浏览人群 -->
            <div class="mySelect">
              <div class="select" @click.stop="selectList(3)">
                <span :class="{ tsxts: rate !== '浏览人群' }">{{rate}}</span>
                <i :class="[isRate ? 'redOne' : 'corner']"></i>
              </div>
              <div class="option" v-show="isRate">
                <i class="whiteOption"></i>
                <div class="btm">
                  <div class="province">
                    <div class="list" :id='"rate"+index' @click.stop="changeRate(item,index)" v-for="(item,index) in rateList" :key="index">{{item}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="lines"><div class="aaa"></div></div>
            <!-- 创建日期 -->
            <div class="mySelect">
              <div class="select" @click.stop="selectList(4)">
                <span :class="{ tsxts: term !== '创建日期' }">{{term}}</span>
                <i :class="[isTerm ? 'redOne' : 'corner']"></i>
              </div>
              <div class="option" v-show="isTerm">
                <i class="whiteOption"></i>
                <div class="btm">
                  <div class="province">
                    <div class="list" :id='"term"+index' @click.stop="changeTerm(item,index)" v-for="(item,index) in termList" :key="index">{{item}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 列表数据展示 -->
          <div class="listInfo" v-if="loinList.length === 0"><div class="wu">抱歉，暂未查找到相关产品......</div></div>
          <div class="listInfo" v-for="(items,index) in loinList" :key="index">
            <div class="one">
              <h2>{{items.productName}}</h2>
              <div class="t2" v-if="items.productTag !== ''">
                <div class="text" v-for="(val,index) in items.productTag.split(',')" :key="index">
                  <span>{{val}}</span>
                </div>
              </div>
            </div>
            <div class="two">
              <div class="t3">
                <div class="info"><div>{{items.maxQuotaAmount}}</div><div>难度指数</div></div>
                <div class="info"><div>{{items.maxProductTerm}}</div><div>创建时间</div></div>
                <div class="info"><div>{{items.productRate}}</div><div>完成时间</div></div>
              </div>
            </div>
            <div class="three">
              <div class="top"><img src="../assets/imgs/logo2.png"><span>{{items.productSource}}</span></div>
              <div class="bottom">所属类别</div>
            </div>
            <div class="four">
              <div class="apply" @click="applyNow(items)"><span>{{items.rou ? '立即查看':'敬请期待'}}</span></div>
            </div>
          </div>
          <!-- 分页 -->
          <div class="botPaging">
            <div class="paging">
              <div class="page-bar">
                <ul>
                  <li v-if="cur>1"><span v-on:click="cur--,pageClick()" class="bor">上一页</span></li>
                  <li v-if="cur==1"><span class="banclick bor">上一页</span></li>
                  <li v-for="(item,index) in indexs" :key="index" v-bind:class="{ 'selectNum': cur == item}">
                    <span v-on:click="btnClick(item)" class="bor2">{{ item }}</span>
                  </li>
                  <li v-if="cur!=all"><span v-on:click="cur++,pageClick()" class="bor">下一页</span></li>
                  <li v-if="cur == all"><span class="banclick bor">下一页</span></li>
                  <li class="tiaoshu">
                    <span class="bor" @click.stop="selectList(5)"><i>{{size}}</i>条/页</span>
                    <div class="three" v-if="isSize">
                      <i class="reeThree"></i>
                      <div class="btm">
                        <div class="province">
                          <div class="list" :id='"term"+index' @click.stop="changeSize(item)" v-for="(item,index) in sizeList" :key="index">{{item}}条/页</div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li><p class="mar" style="margin: 0;">共<i>{{all}}</i>页</p></li>
                </ul>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
@import "../assets/css/ymxgzs.css";
</style>
<script type="text/javascript">
export default {
  name: 'IndexWS',
  data () {
    return {
      isSize: false, // 选中每页条数
      isApplyNow: false, // 立即申请弹窗
      isclose: false, // 了解详情弹窗
      isCode: false, // 是否展示二维码
      isTerm: false, // 选择还款期限
      isRate: false, // 选择年化利率
      isLoan: false, // 选择借款金额
      isCity: false, // 选择市
      isRegion: false, // 开启地区选择-省

      loan: '浏览次数',
      rate: '浏览人群',
      term: '创建日期',
      form: {
        applicableAreaProvince: '', // 省(名字)
        applicableAreaCity: '所在地区', // 市
        amount: '', // 浏览次数
        rate: '', // 浏览人群
        term: '' // 创建日期
      },
      regionList: [], // 省市数据
      children: [], // 市级数据
      amountList: ['全部', '20万以下', '20-100万', '100万以上'],
      rateList: ['全部', '5%以下', '5%-10%', '10%以上'],
      termList: ['全部', '6个月以内', '6-12个月', '12个月以上'],
      sizeList: [5, 10, 15],
      loinList: [], // 列表数据
      all: 10, // 总页数
      cur: 1, // 当前页码
      size: 5, // 当前条数

      poputData: {}, // 弹窗数据
      conditionList: [], // 申请条件：
      materialList: [], // 申请材料
      productList: [], // 还款方式
      skipLinkImg: '', // 二维码

      postInfo: {
        parent_id: 0,
        level:1,
        islal: 0,
      }
    }
  },
  mounted () {
    $('#financingProducts').addClass('active').siblings().removeClass('active')
    this.getprovincalData()
    this.dataListFn(this.cur, this.size)
  },
  computed: {
    // 分页
    indexs () {
      var left = 1
      var right = this.all
      var ar = []
      if (this.all >= 5) {
        if (this.cur > 3 && this.cur < this.all - 2) {
          left = this.cur - 2
          right = this.cur + 2
        } else {
          if (this.cur <= 3) {
            left = 1
            right = 5
          } else {
            right = this.all
            left = this.all - 4
          }
        }
      }
      while (left <= right) {
        ar.push(left)
        left++
      }
      return ar
    }
  },
  methods: {
    // 点击立即查看
    applyNow (val) {
      if (val.rou) {
        this.$router.push(val.rou);
      }
    },
    // 请求数据
    dataListFn (cur, size) {
      this.loinList = [
        {
          rou:'/new/ymzs01',
          maxProductTerm: '211108',
          maxQuotaAmount: '* * *',
          productName: "filters 过滤器",
          productRate: '211110',
          productSource: "Vue过滤器",
          productTag: "纯信用,0手续费,随借随还",
        },
        {
          rou:'/new/ymscri',
          maxProductTerm: '211110',
          maxQuotaAmount: '* * * *',
          productName: "生成指定年份日历",
          productRate: '211115',
          productSource: "js基础",
          productTag: "纯信用,0手续费,随借随还",
        },
        {
          rou:'',
          maxProductTerm: '211118',
          maxQuotaAmount: '* * * *',
          productName: "同时调用多个接口",
          productRate: '211120',
          productSource: "js+es6",
          productTag: "纯信用,0手续费,随借随还",
        },
        {
          rou:'',
          maxProductTerm: '211128',
          maxQuotaAmount: '* * *',
          productName: "数组相关",
          productRate: '211130',
          productSource: "es6基础",
          productTag: "纯信用,0手续费,随借随还",
        },
        {
          rou:'',
          maxProductTerm: '211218',
          maxQuotaAmount: '* * * *',
          productName: "读取xlsx表格数据",
          productRate: '211230',
          productSource: "js基础",
          productTag: "纯信用,0手续费,随借随还",
        },
      ]
      this.size = 5// 每页多少条
      this.all = 1// 共几页
    },
    // 点击页数
    btnClick (data) {
      if (data != this.cur) this.cur = data
      this.dataListFn(this.cur, this.size)
    },
    // 点击上/下一页
    pageClick () {
      this.dataListFn(this.cur, this.size)
    },
    // 每页条数改变
    changeSize (val) {
      this.cur = 1
      this.size = val
      this.dataListFn(this.cur, this.size)
      this.isSize = false
    },
    // 筛选条件改变
    isChange () {
      this.cur = 1
      this.dataListFn(1, 5)
    },
    // 筛选条件选择器状态
    selectList (val) {
      switch (val) {
        case 1:
          this.isCity = false
          this.isLoan = false
          this.isRate = false
          this.isTerm = false
          this.isSize = false
          this.isRegion = !this.isRegion
          if (this.form.applicableAreaCity !== '所在地区') {
            this.isCity = true
          } else {
            this.regionList.forEach((item, ind) => {
              var out = document.getElementById('list' + ind)
              out.classList.remove('listColor1')
            })
          }
          break
        case 2:
          this.isRegion = false
          this.isCity = false
          this.isRate = false
          this.isTerm = false
          this.isSize = false
          this.isLoan = !this.isLoan
          break
        case 3:
          this.isRegion = false
          this.isCity = false
          this.isLoan = false
          this.isTerm = false
          this.isSize = false
          this.isRate = !this.isRate
          break
        case 4:
          this.isRegion = false
          this.isCity = false
          this.isLoan = false
          this.isRate = false
          this.isSize = false
          this.isTerm = !this.isTerm
          break
        default:
          this.isRegion = false
          this.isCity = false
          this.isLoan = false
          this.isRate = false
          this.isTerm = false
          this.isSize = !this.isSize
          break
      }
    },
    // 点击关闭所有选择器
    closeArea () {
      this.isRegion = false
      this.isCity = false
      this.isLoan = false
      this.isRate = false
      this.isTerm = false
      this.isSize = false
    },
    // 选择省
    selectProvince (val, index) {
      // 清空所有选中的样式，并最后加上此选中项样式
      this.regionList.forEach((item, ind) => {
        var out = document.getElementById('list' + ind)
        out.classList.remove('listColor1')
      })
      this.children.forEach((item, ind) => {
        var out = document.getElementById('city' + ind)
        out.classList.remove('listColor2')
      })
      var mask = document.getElementById('list' + index)
      mask.classList.add('listColor1')

      this.form.applicableAreaCity = '所在地区'
      this.isCity = true
      this.form.applicableAreaProvince = val.name
      //请求市数据
      var postData ={
        parent_id: val.id,
        level:2,
        islal: 0,
      }
      let that = this
      $.ajax({
        type: 'POST',
        url: 'http://106.55.243.248/api/getAddress',
        crossDomain: true,
        data: postData,
        headers: { 'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'},
        success(res) {
          that.children = res.data.data
        },
        error(e) {
          that.$message.error('获取数据失败')
        }
      })
    //   this.isChange()
    },
    // 选择市
    selectCity (val, index) {
      // 清空所有选中的样式，并最后加上此选中项样式
      this.children.forEach((item, ind) => {
        var out = document.getElementById('city' + ind)
        out.classList.remove('listColor2')
      })
      var mask = document.getElementById('city' + index)
      mask.classList.add('listColor2')

      this.form.applicableAreaCity = val.name
      this.isRegion = false
      this.isChange()
    },
    // 选择浏览次数
    changeAmount (val, index) {
      this.amountList.forEach((item, ind) => {
        var out = document.getElementById('loan' + ind)
        out.classList.remove('listColor1')
      })
      var mask = document.getElementById('loan' + index)
      mask.classList.add('listColor1')

      this.form.amount = val
      this.loan = val
      this.isLoan = false
      // this.isChange()
    },
    // 选择浏览人群
    changeRate (val, index) {
      this.rateList.forEach((item, ind) => {
        var out = document.getElementById('rate' + ind)
        out.classList.remove('listColor1')
      })
      var mask = document.getElementById('rate' + index)
      mask.classList.add('listColor1')

      this.form.rate = val
      this.rate = val
      this.isRate = false
      // this.isChange()
    },
    // 选择创建日期
    changeTerm (val, index) {
      this.termList.forEach((item, ind) => {
        var out = document.getElementById('term' + ind)
        out.classList.remove('listColor1')
      })
      var mask = document.getElementById('term' + index)
      mask.classList.add('listColor1')

      this.form.term = val
      this.term = val
      this.isTerm = false
      // this.isChange()
    },
    // 获取省、市数据
    getprovincalData () {
      let that = this
      $.ajax({
        type: 'POST',
        url: 'http://106.55.243.248/api/getAddress',
        crossDomain: true,
        data: that.postInfo,
        headers: { 'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8' },
        success(res) {
          that.regionList = res.data.data
          console.log(res,'5555555555555');
        },
        error(e) {
          that.$message.error('获取数据失败')
        }
      })
    }
  }
}
</script>
